<template>
  <div class="singer">
    <div>
      <div class="singer_top">
      <span class="return_go iconfont" @click="fnreturn">&#xe625;</span>
<!--        Singer classification-->
      <span class="singer_details">歌曲标题</span>
<!--      <span class="star iconfont">推荐指数：&#xe7a9;&#xe7a9;&#xe7a9;</span>-->
<!--      <span class="sousuo_details iconfont">&#xe633;</span>-->
      </div>


      <div class="show_hide">
        <span>播放全部</span>
        <span>共50首</span>
      </div>

      </div>

    <div class="hot-singers"></div>
    <div class="singers">

<!--      <li v-for="article in articles" @click="getDescribe(article.id)">-->
      <div class="songer_list_des" @click="fnsinder_des()" v-for="n in 10" :key="n">
        <ul>
                <li class="singer_li">
<!--                    <img :src=item.songlist_img alt="">-->
<!--                    {{index.singer_name}}-->
                  <img src="https://p1.music.126.net/tu4ON-DsY1SAJIL-JInuqw==/109951164456255025.jpg?param=140y140" class="singer_img" alt="">
                  <span>隔壁老樊</span>
                </li>
          </ul>
      </div>
    </div>


    <div>

    </div>

<!--<div class="block">-->
<!--&lt;!&ndash;  <span class="demonstration">大于 7 页时的效果</span>&ndash;&gt;-->
<!--  <el-pagination-->
<!--    layout="prev, pager, next"-->
<!--    :total="1000">-->
<!--  </el-pagination>-->
<!--</div>-->

</div>


</template>

<script>
  export default {
      name: 'singer',
      data() {

          return {
              rest: '',
              hot_singers: '',

          }
      },
      methods: {
          hide_show:false,
          fnsinder_des(){
              this.$router.push({
                  path:'/details_singer_des',
                  query:{
                      id:''
                  }
              })

          },

          fnshow(){
            if(true){
                hide_show = true;
                  }
               },
          fnreturn(){
            if(true){
                this.$router.go(-1)
            }
        },

           // 当前页
        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        // // 点击是获取当前页的数据
        // handleCurrentChange(val) {
        //     console.log(`当前页: ${val}`);
        //     this.getDY_img(val)
        //
        // },
        // getDY_img(val){
        //     this.$http.get("http://127.0.0.1:8000/app01/querymovie/?kind=电影&page="+val)
        //     .then((res)=>{
        //         this.moves = res.data
        //       })
        //     .catch((res)=> {
        //         console.log("失败的回调", res)
        //       })
          getsinger(){
            this.$http.get(this.$store.state.baseUrl+"/v1/cities?type=guess")
            // 成功的回调
            .then((res)=>{
                this.hot_singers=res.data
            })
            .catch((res)=>{
                console.log("失败的回调",res)
            })
        },
      },
      mounted () {
        // 调用一下
        this.getsinger();
        // this.getDY_img(1);
        // this.getpage();
        copy();

    }
  }
</script>

<style scoped>
  .singer{
    width: 100%;
  }
  .return_go{
    padding-left: 1.5rem;
    font-size: 1.8rem;
  }
  .singer_top{
    top: 0;
    left: 0;
    width: 100%;
    background: #f1f1f1;
    margin-top: 0;
    position:fixed;
    font-size: 1.2rem;
    /*color: gainsboro;*/
    line-height: 3.75rem;
    z-index: 10000;
    /*background: rgb(0,0,0,0.5);*/
  }
  .mybox-leave-active,.mybox-enter-active{
      transition: all 1s ease;
}
.mybox-leave-active,.mybox-enter{
opacity:0 !important;
}
.show_hide{
  display: inline-block;
}

.mybox-leave,.mybox-enter-active{
  opacity: 500;
}
.el-dropdown-link{
  padding-left: 16rem;
  font-size: 1.2rem;
}
.show_hide{
  font-size: 1.2rem;
  margin-top: 1rem;
  padding-left: 1.2rem;
}
.singer_img{
  width: 2rem;
  border: 0.1rem solid #f1f1f1;
  border-radius: 50%;
  vertical-align: middle;
}
.singers{
  margin-top: 1rem;
}
.hot-singer{
  padding-left: 1rem;
}
.singer_li{
  vertical-align: middle;

}
.songer_list_des{
  margin-top: 1.2rem;
}
.block{
  margin-top: 1.5rem;
}








@font-face {
  font-family: 'iconfont';  /* project id 1482310 */
  src: url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.eot');
  src: url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.woff') format('woff'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1482310_mkfkyhuldc.svg#iconfont') format('svg');
}
  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 30rem; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.02rem;
    -moz-osx-font-smoothing: grayscale;
  }

</style>


